<div class="row" id="registroForm">
	<div class="span5" data-bind="visible: !mostrarForm()">
		<div class="alert alert-info">
			<label>Cargando <i class="icon-refresh"></i></label>
		</div>
	</div>
	<div class="span5 well" data-bind="visible: mostrarForm" style="display:none ">
		<h4 data-bind="text: title">Persona</h4>
		<hr>
		<form id="login-form" class="form-horizontal">
		<fieldset data-bind="with: usuarioNuevo">
			<div class="control-group" data-bind="validationElement: nombre">
				<label class="control-label" for="inputNombre">Nombre:</label>
				<div class="controls">
					<input type="text" id="inputNombre" data-bind="value: nombre" class="input-large">
					<span class="help-inline error" data-bind="validationMessage: nombre"></span>
				</div>
			</div>
			<div class="control-group" data-bind="validationElement: apellido">
				<label class="control-label" for="inputApellido">Apellido:</label>
				<div class="controls">
					<input type="text" id="inputApellido" data-bind="value: apellido" class="input-large">
					<span class="help-inline error" data-bind="validationMessage: apellido"></span>
				</div>
			</div>
			<div class="control-group" data-bind="validationElement: $root.provincia">
				<label class="control-label" for="selectProvincia">Provincia:</label>
				<div class="controls">
					<select id="selectProvincia" data-bind="options: $root.provincias, optionsText: 'descripcion', value: $root.provincia" class="input-large"></select>
					<span class="help-inline error" data-bind="validationMessage: $root.provincia"></span>
				</div>
			</div>
			<div class="control-group" data-bind="validationElement: departamento">
				<label class="control-label" for="selectDepartamento">Departamento:</label>
				<div class="controls">
					<select id="selectDepartamento" data-bind="options: $root.provincia().departamentos, optionsText: 'descripcion', optionsValue: 'id', value: departamento" class="input-large"></select>
					<span class="help-inline error" data-bind="validationMessage: departamento"></span>
				</div>
			</div>
			<div class="control-group" data-bind="validationElement: perfil">
				<label class="control-label" for="selectPerfil">Perfil:</label>
				<div class="controls">
					<select id="selectPerfil" data-bind="options: $root.perfiles, optionsText: 'descripcion', optionsValue: 'id', value: perfil" class="input-large"></select>
					<span class="help-inline error" data-bind="validationMessage: perfil"></span>
				</div>
			</div>
			<div class="control-group" data-bind="validationElement: usuario">
				<label class="control-label" for="inputUsuario">Usuario:</label>
				<div class="controls">
					<input type="text" id="inputUsuario" data-bind="value: usuario" class="input-large">
					<span class="help-inline error" data-bind="validationMessage: usuario"></span>
				</div>
			</div>
			<div class="control-group" data-bind="validationElement: password">
				<label class="control-label" for="inputPassword">Contrase&ntilde;a:</label>
				<div class="controls">
					<input type="password" id="inputPassword" data-bind="value: password" class="input-large">
					<span class="help-inline error" data-bind="validationMessage: password"></span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="inputRepite">Repita la contrase&ntilde;a:</label>
				<div class="controls">
					<input type="password" id="inputRepite" data-bind="value: repite" class="input-large">
				</div>
			</div>
			<div class="control-group" data-bind="visible: remito">
				<label class="control-label" for="inputInactivo">Inactivo:</label>
				<div class="controls">
					<input type="checkbox" id="inputInactivo" class="input-large" data-bind="checked: activo">
				</div>
			</div>
			<div data-bind="visible: isAnyMessageShown()" class="alert alert-block" id="errorMsg">
				<h4 class="alert-heading">Error en el formulario!</h4>
				Hay valores invalidos en el formulario.
			</div>
			<div data-bind="visible: $root.mostrarFormError" class="alert alert-error">
				<span data-bind="text: $root.formErrorMensaje"></span>
			</div>			
			<div class="form-actions">
				<button id="registro" class="btn btn-primary" data-bind="click: $root.registro">Salvar</button>
				<button id="registro" class="btn" data-bind="click: $root.volver">Cancelar</button>
			</div>
		</fieldset>
		</form>
		<div data-bind="visible: mostrarSuccess" class="alert alert-success">
			<span data-bind="html: successMensaje"></span>
		</div>
		<div data-bind="visible: mostrarError" class="alert alert-error">
			<span data-bind="text: errorMensaje"></span>
		</div>		
	</div>
</div>
<script language="javascript">
	function NuevoUsuario() {
		var self = this;

		self.title = ko.observable("Administrar Usuario");
		self.mostrarForm = ko.observable(false);
		self.mostrarSuccess = ko.observable(false);
		self.successMensaje = ko.observable("");
		self.mostrarError = ko.observable(false);
		self.errorMensaje = ko.observable("");
		self.mostrarFormError = ko.observable(false);
		self.formErrorMensaje = ko.observable("");

		self.usuarioNuevo = ko.validatedObservable(new CUsuario());		
		self.perfiles = ko.observableArray();
		self.provincias = ko.observableArray();
		self.provincia = ko.observable().extend({required: true});

		self.cargaPerfiles = function() {
			var exitoPerfil = function(perfiles) {
				if(perfiles.status != "OK") {
				} else {
					for(var i=0; i< perfiles.data.length; i++) {
						self.perfiles().push({id:perfiles.data[i].id, descripcion:perfiles.data[i].descripcion});
					}
				}
			};
			var fallaPerfil = function(data) {
			};
			getDataSync("./servidor/sterilav.php?op=listaPerfiles",exitoPerfil,fallaPerfil);
		};
		self.cargaProvincias = function() {
			var exitoProvincia = function(provincias) {
				if(provincias.status != "OK") {
				} else {
					for(var i=0; i< provincias.data.length; i++) {
						self.provincias().push(provincias.data[i]);
					}
				}
			};
			var fallaProvincia = function(data) {
			};
			getDataSync("./servidor/sterilav.php?op=listaProvincias",exitoProvincia,fallaProvincia);
		};
				
		self.cargar = function() {
			var exito = function(data) {
				if(data.status != "OK") {
				} else {
					self.usuarioNuevo().nombre(data.data.nombre);
					self.usuarioNuevo().apellido(data.data.apellido);
					self.usuarioNuevo().usuario(data.data.usuario);
					self.usuarioNuevo().password(data.data.password);
					self.usuarioNuevo().repite(data.data.password);
					self.usuarioNuevo().departamento(data.data.departamento);
					self.usuarioNuevo().perfil(data.data.perfil);
					self.usuarioNuevo().remito(data.data.remito);
					self.usuarioNuevo().activo((data.data.activo==1) ? true : false);
				}
			};
			var falla = function(data) {
			};
			getData("./servidor/sterilav.php?op=getUsuario&id=" + amplify.store.sessionStorage("sterilav.usuarioEditado"),exito,falla);
		};
		
		self.registro = function() {
			self.usuarioNuevo().errors.showAllMessages(true);
			if (!self.usuarioNuevo().isValid()) {
				return;
			}
			//Guardar en la base de datos
			self.mostrarFormError(false);
			var exito = function(data) {
				if(data.status != "OK") {
					$("#errorMsg").empty();
					$("#errorMsg").show();
					$("#errorMsg").append(data.data);
				} else {
					self.mostrarForm(false);
					self.successMensaje(data.data + "<br><a href='#' onclick='abrir();'>Volver</a>");
					self.mostrarSuccess(true);
					amplify.store.sessionStorage("sterilav.usuarioEditado", null);
				}
			};
			var falla = function(data) {
				if(data.data) {
					self.formErrorMensaje(data.data);
				} else {
					self.formErrorMensaje("Hubo un error tratando de actualizar el usuario.");
				}
				self.mostrarFormError(true);				
			};
			var isactivo = self.usuarioNuevo().activo() ? 1 : 0;
			var usuarioCreado = {
				id: amplify.store.sessionStorage("sterilav.usuarioEditado"),
				nombre: self.usuarioNuevo().nombre(),
				apellido: self.usuarioNuevo().apellido(),
				usuario: self.usuarioNuevo().usuario(),
				perfil: self.usuarioNuevo().perfil(),
				password: self.usuarioNuevo().password(),
				departamento: self.usuarioNuevo().departamento(),
				remito: self.usuarioNuevo().remito(),
				activo: isactivo
			};
			var url = "";
			if(amplify.store.sessionStorage("sterilav.usuarioEditado")) {
				url = "./servidor/sterilav.php?op=updateUsuario";
			} else {
				url = "./servidor/sterilav.php?op=putUsuario";
			}
			postData(url,exito,falla,usuarioCreado);
		};

		self.ingreso = function() {
			$("#container").load("./cliente/paginas/login.html");
		};
		self.volver = function() {
			amplify.store.sessionStorage("sterilav.usuarioEditado", null);
			window.location.href = "./Index.html";
		};
		
		self.cargaPerfiles();
		self.cargaProvincias();
		if(amplify.store.sessionStorage("sterilav.usuarioEditado")) {
			self.cargar();
		}
		self.mostrarForm(true);
	};

	function CUsuario() {
		var self = this;
		
		self.id = ko.observable();
		self.nombre = ko.observable().extend({required: true});
		self.apellido = ko.observable().extend({required: true});
		self.usuario = ko.observable().extend({required: true});
		self.perfil = ko.observable().extend({required: true});
		self.password = ko.observable().extend({required: true});
		self.departamento = ko.observable().extend({required: true});
		self.remito = ko.observable(false).extend({required: true});
		self.activo = ko.observable(false).extend({required: true});
		self.repite = ko.observable();		
	};

	function abrir() {
		$("#container").load("./cliente/paginas/listaUsuarios.html");
	}
		
	var usuarioModelo = new NuevoUsuario();
	ko.applyBindings(usuarioModelo, document.getElementById("registroForm"));  	
</script>
